<template>
  <div class="searchBar">
    <input type="text" v-model="titleValue" @input="searchBlogListForTitle" />
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref } from "vue";
import { jieliuUtil } from "@/util/util";
const props = defineProps({
  getList: {
    type: Function,
    default: () => {},
  },
});
const titleValue = ref<string>("");
const searchBlogListForTitle = () => {
  jieliuUtil(() => props.getList(titleValue.value), 500);
};
</script>
<style scoped lang="scss">
.searchBar {
  box-sizing: border-box;
  width: 100%;
  background-color: #ffffff;
  padding: 0 16px;
  position: absolute;
  top: 0;
  z-index: 9;
  input {
    margin: 6px 0;
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    border-radius: 10px;
    padding: 8px 12px;
    border: none;
    background-color: #f2f3f0;
    border: 1px solid $blue;
  }
}
</style>
